<template>
  <div style="border-top: 1px solid #EAEDF3; margin-top: 2px;" class="container">
    <section class="searchBox">
      <el-row v-if="listData && listData.length > 0" :gutter="20">
        <el-col v-for="(item, index) in listData" :key="index"   class="list-box" :span="8">
          <div class="item" @click="$router.push({name:'teachDesignDetails', query: { designId: item.id }})">
            <div class="img-box">
              <el-image
                v-if="item.user.avatarUrl"
                style="width: 64px; height: 64px; overflow: hidden; border-radius: 50%;"
                :src="item.user.avatarUrl"
              />
              <el-image
                v-else
                style="width: 64px; height: 64px; overflow: hidden; border-radius: 50%;"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              />

              <div v-if="item.user.title" class="titleUrl">
                <el-image style="width: 56px; overflow: hidden;" :src="item.user.title" />
              </div>
              <div class="name text-center marginT10">{{ item.user.name }}</div>
            </div>
            <div class="describe">
              <div class="fs-20 text-s-o line-height20">{{ item.title }}</div>
              <div class="classify marginT10">
                <div v-for="(categoryItem, categoryInx) in item.categoryList" :key="categoryInx">
                  <span v-if="categoryInx === 0">{{ categoryItem }}</span>
                  <span v-else>/{{ categoryItem }}</span>
                </div>
              </div>
              <div class="name marginT10 text-s-o" :title="item.profiles">{{ item.profiles }}</div>
              <div class="tag-box marginT15 text-s-o">
                <el-tag
                  v-for="(tagsItem, tagsInx) in item.tags"
                  :key="tagsInx"
                  class="tag"
                >{{ tagsItem }}</el-tag>
              </div>
              <ul class="icon-box marginT20">
                <li class="text-s-o" :title="item.countThumb">
                  <el-image
                    class="img"
                    style="width: 20px; position: relative; top: 0px;"
                    :src="require('@/assets/images/report_give.png')"
                  />
                  <span class="num text-s-o">{{ item.countThumb }}</span>
                </li>
                <li class="text-s-o" :title="item.countComment">
                  <el-image
                    class="img"
                    style="width: 18px; position: relative; top: 1px;"
                    :src="require('@/assets/images/report_comment.png')"
                  />
                  <span class="num text-s-o">{{ item.countComment }}</span>
                </li>
                <li class="text-s-o" :title="item.countShare">
                  <el-image
                    class="img"
                    style="width: 16px; position: relative; top:2px;"
                    :src="require('@/assets/images/report_share.png')"
                  />
                  <span class="num text-s-o">{{ item.countShare }}</span>
                </li>
                <li class="text-s-o" :title="item.createTime">
                  <el-image
                    class="img"
                    style="width: 18px; position: relative; top: 0px;"
                    :src="require('@/assets/images/report_time.png')"
                  />
                  <span class="num text-s-o">{{ item.createTime }}</span>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row v-else>
        <el-col class="list-box">
          <div style="text-align: center;">暂无教学设计数据</div>
        </el-col>
      </el-row>

      <Pagination
        v-if="total > 0"
        :limit="12"
        :total="total"
        class="pagination"
        @pagination="pagination"
      />
    </section>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { pageCollect } from '@/api/myCollect'
import { liveState } from './data'
export default {
  name: 'LessonPreparation',
  components: {
    Pagination
  },
  data () {
    return {
      listData: null,
      total: null,
      listQuery: {
        pager: {
          page: 1,
          pageSize: 12
        }
      }

    }
  },

  watch: {
  },
  mounted () {

  },
  created () {
    this.init()
  },
  methods: {
    async init () {
      await this.searchList()
    },
    searchList () {
      pageCollect(this.listQuery).then(res => {
        console.log('备课:', res.data.records)
        this.listData = res.data.records
        this.total = res.data.total
      })
    },
    pagination ({ page, limit }) {
      this.listQuery.pager.page = page
      this.listQuery.pager.pageSize = limit
      this.init()
    }

  }
}
</script>
<style lang="scss" scoped>
.searchBox {
  padding: 0 40px;
}

.list-box {
  border-radius: 10px;
  overflow: hidden;
  .orgName {
    display: flex;
    align-content: center;
    span {
      flex: 1;
      color: rgba(0, 0, 0, 0.45);
    }
  }
  .block {
    background-color: white;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    text-align: center;
  }
  .img {
    width: 100%;
  }

  .item {
    padding: 20px 24px;
    background-color: white;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 24px;
    display: flex;
    .img-box {
      width: 64px;
      position: relative;
      .titleUrl {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
      }
    }
    .describe {
      flex: 1;
      overflow: hidden;
      margin-left: 12px;
      .classify {
        font-family: MicrosoftYaHei;
        color: rgba(0, 0, 0, 0.65);
        line-height: 14px;
        display: flex;
      }
      .name {
        font-family: MicrosoftYaHei;
        color: rgba(140, 140, 140, 1);
        line-height: 14px;
      }
      .tag-box {
        height: 24px;
        .tag {
          line-height: 24px;
        }
        .tag:not(:first-child) {
          margin-left: 8px;
        }
      }
      .icon-box {
        display: flex;
        justify-content: space-between;
        li {
          display: flex;
          align-items: center;
          .num {
            font-family: MicrosoftYaHei;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
            margin-left: 4px;
            flex: 1;
          }
        }
        li:not(:last-child) {
          max-width: 56px;
          min-width: 50px;
        }
        li:last-child {
          flex: 1;
        }
      }
    }
  }
}
.pagination {
  margin-top: 20px;
}
</style>
